<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { navigateTo, scanCode } from '@tarojs/taro';
import { INDEX_TOTAL } from '/@/api/modules/workbench/workbench';
import { appEvents } from '/@/utils/events';
import IMG_ICON_MSG from '/@/assets/image/icon/msg.png';
import IMG_ICON_ORDER from '/@/assets/image/icon/order.png';
import IMG_ICON_SCAN from '/@/assets/image/icon/scan.png';
import IMG_ICON_ASSET_CHANGE from '/@/assets/image/icon/asset-change.png';
import IMG_ICON_ALARM from '/@/assets/image/icon/alarm.png';
import IMG_ICON_ORDER_UP from '/@/assets/image/icon/order-up.png';
import { ACCESS } from '/@/api/modules/qrcode/open';

const state = reactive<WorkbenchApi.IndexTotalResp>({
  workOrderQuantity: 0,
  planTaskQuantity1: 0,
  planTaskQuantity2: 0,
  msgAlarmQuantity: 0,
  messageQuantity: 0,
});

/**
 * 获取首页统计
 */
function getIndexTotal() {
  INDEX_TOTAL({}).then((res) => {
    state.workOrderQuantity = res.workOrderQuantity;
    state.planTaskQuantity1 = res.planTaskQuantity1;
    state.planTaskQuantity2 = res.planTaskQuantity2;
    state.msgAlarmQuantity = res.msgAlarmQuantity;
    state.messageQuantity = res.messageQuantity;
  });
}

onMounted(() => {
  appEvents.on('alarmItemRead', () => {
    getIndexTotal();
  });

  appEvents.on('msgItemRead', () => {
    getIndexTotal();
  });

  getIndexTotal();
});

/**
 * 扫一扫功能
 */
function scan() {
  scanCode({
    onlyFromCamera: true,
    success: (res) => {
      console.log(res);
      scanResult(res.result);
    },
  });
}

/**
 * 扫描结果处理
 */
function scanResult(result: string) {
  const url = new URL(result);
  const t = url.searchParams.get('t');
  if (!t) {
    return;
  }
  ACCESS({ t: t }).then((res) => {
    if (!res.comResp) {
      navigateTo({
        url: '/pages/scan/scan-fail/index?error=network',
      });
      return;
    }
    if (res.comResp.code === 101) {
      navigateTo({
        url: '/pages/scan/scan-fail/index?error=unknown',
      });
      return;
    }

    if (!res.content) {
      navigateTo({
        url: '/pages/scan/scan-fail/index?error=network',
      });
      return;
    }
    /**
     * 获取参数信息
     */
    const params = res.content.params as {
      id: string;
    };
    switch (res.content?.businessTag) {
      case 'ASSET_DETAIL':
        navigateTo({
          url: `/pages/scan/scan-success/index?assetId=${params.id}`,
        });
        break;
    }
  });
}
</script>

<template>
  <view class="home-logistics-utils">
    <view class="home-logistics-utils__title">我的工具</view>
    <nut-grid class="home-logistics-utils__wrapper" column-num="4" :border="false">
      <nut-grid-item text="我的消息" @click="navigateTo({ url: '/pages/msg/list/index' })">
        <nut-badge :value="state.messageQuantity" color="#ff3e3e">
          <nut-avatar shape="square" bg-color="transparent">
            <image :src="IMG_ICON_MSG" />
          </nut-avatar>
        </nut-badge>
      </nut-grid-item>
      <nut-grid-item text="故障上报" @click="navigateTo({ url: '/pages/work-order/edit/index' })">
        <nut-badge color="#ff3e3e">
          <nut-avatar shape="square" bg-color="transparent">
            <image :src="IMG_ICON_ORDER_UP" />
          </nut-avatar>
        </nut-badge>
      </nut-grid-item>
      <nut-grid-item text="我的工单" @click="navigateTo({ url: '/pages/work-order/list/index' })">
        <nut-badge :value="state.workOrderQuantity" color="#ff3e3e">
          <nut-avatar shape="square" bg-color="transparent">
            <image :src="IMG_ICON_ORDER" />
          </nut-avatar>
        </nut-badge>
      </nut-grid-item>
      <nut-grid-item text="扫一扫">
        <nut-badge color="#ff3e3e">
          <nut-avatar shape="square" bg-color="transparent" @click="scan">
            <image :src="IMG_ICON_SCAN" />
          </nut-avatar>
        </nut-badge>
      </nut-grid-item>
      <nut-grid-item text="设备变动">
        <nut-badge color="#ff3e3e">
          <nut-avatar
            shape="square"
            bg-color="transparent"
            @click="navigateTo({ url: '/pages/asset-change/index/index' })"
          >
            <image :src="IMG_ICON_ASSET_CHANGE" />
          </nut-avatar>
        </nut-badge>
      </nut-grid-item>
      <nut-grid-item text="全部告警" @click="navigateTo({ url: '/pages/alarm/list/index' })">
        <nut-badge :value="state.msgAlarmQuantity" color="#ff3e3e">
          <nut-avatar shape="square" bg-color="transparent">
            <image :src="IMG_ICON_ALARM" />
          </nut-avatar>
        </nut-badge>
      </nut-grid-item>
    </nut-grid>
  </view>
</template>

<style lang="scss">
.home-logistics-utils {
  margin-bottom: 20px;

  &__title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
  }
}
</style>
